/***
 * 折线图
 * 
 * ***/

import { nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, reactive, ref } from "vue";
import * as echarts from 'echarts'
import { init, EChartsOption } from 'echarts'
import resize from "@/utils/resize";
import { grid, fontSize } from "./chartsData"
const {
  chart,
  beforeDestroy,
  activated,
  deactivated
} = resize()
export interface propData {
  name: string,
  color: string,
  data: number[]
}

export default function () {
  // 基础折线图，中间带圆点
  async function linelist(id: string, xData: string[], xName: string, yName: string, data: number[]) {
    nextTick(() => {
      initChart(
        id,
        xData,
        xName,
        yName,
        data,
      )
    })
  }

  function initChart
    (id: string,
      xData: string[],
      yName = '',
      xName = '',
      data: any,
    ) {
    const option = {
      grid: {
        left: grid.left,
        top: grid.top,
        right: grid.right,
        bottom: grid.bottom,
        containLabel: true
      },
      xAxis: {
        data: xData,
        splitLine: {
          show: false
        },
        axisLabel: {
          textStyle: {
            fontSize: fontSize.fontSizex,
            // color: 'rgba(0, 0, 0, 255)';
            color: '#ffffff'
          },
          interval: 0,
        },
      },
      yAxis: {
        axisLabel: {
          textStyle: {
            fontSize: fontSize.fontSizey,
            color: '#ffffff'
          }
        },
        splitLine: {
          show: false
        },
        type: "value",
        min: 0,
        max: 50,
        interval: 10,
      },
      series: [{
        type: 'line',
        stack: 'Total',
        itemStyle: {
          color: '#4AC8FF'
        },
        data: data
      }]
    };




    setTimeout(() => {
      const barChart = init(document.getElementById(id) as HTMLDivElement)

      barChart.setOption(option as EChartsOption)
      window.addEventListener('resize', () => {
        barChart.resize()
      })
    }, 500)


  }


  let colorArr = []


  // 平滑折线图
  async function smoothLineChart(id: string, xData: string[], xName: string, yName: string, data: propData[]) {
    
    nextTick(() => {
      smoothChart(
        id,
        xData,
        xName,
        yName,
        data,
      )
    })
  }

  function smoothChart(
  id: string,
  xData: string[],
  yName = '',
  xName = '',
  data: any,
) {
  const legendData = data.map((item: any) => item.name)

  const yAxisArr = data.map((item: any) => ({
    name: item.name,
    type: 'line',
    smooth: true,
    symbol: 'circle',
    symbolSize: 5,
    showSymbol: false,
    lineStyle: {
      width: 1
    },
    itemStyle: {
      color: item.color,
      borderWidth: 12
    },
    areaStyle: {
      opacity: 0.8,
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: item.color },
        { offset: 1, color: 'rgba(255, 255, 255, 0)' }
      ])
    },
    data: item.data
  }))

  const option = {
    legend: {
      icon: 'rect',
      itemWidth: 16,
      itemHeight: 8,
      itemGap: 13,
      right: '4%',
      textStyle: {
        fontSize: 10,
        color: '#fff'
      },
      selectedMode: 'multiple',
      data: legendData
    },
    grid: {
      left: 20,
      top: grid.top,
      right: grid.right,
      bottom: grid.bottom,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: '#57617B'
        }
      }
    },
    xAxis: [{
      type: 'category',
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 1)'
        },
      },
      axisLabel: {
        textStyle: {
          fontSize: fontSize.fontSizex,
          color: '#fff'
        },
        rotate: 65,
        interval: 0,
      },
      data: xData
    }],
    yAxis: [{
      type: 'value',
      axisTick: {
        show: false
      },
      axisLabel: {
        margin: 10,
        textStyle: {
          fontSize: fontSize.fontSizey,
          color: "#fff"
        }
      },
      splitLine: {
        lineStyle: {
          type: "dotted",
          color: 'rgba(255, 255, 255, 1)'
        }
      }
    }],
    series: yAxisArr
  };

  setTimeout(() => {
    const el = document.getElementById(id) as HTMLDivElement
    if (!el) return
    const barChart = echarts.init(el)
    barChart.setOption(option as EChartsOption)
    window.addEventListener('resize', () => {
      barChart.resize()
    })
  }, 500)
}



  return {

    linelist,
    smoothLineChart
  }
}
onBeforeUnmount(() => {
  beforeDestroy()
})

onActivated(() => {
  activated()
})

onDeactivated(() => {
  deactivated()
})



